<template>
	<view v-if="!showPage" style="padding: 10px;">
		<uni-collapse :value="['0', '1']">
			<uni-collapse-item title="篮球">
				<view style="padding: 10px;">
				篮球（basketball），是以手为中心的身体对抗性体育运动，是奥运会核心比赛项目，是仅次于足球的世界第二大运动。
				1891年12月21日，由美国马萨诸塞州斯普林菲尔德基督教青年会训练学校体育教师詹姆斯·奈史密斯发明。
				1896年，篮球运动传入中国天津。1904年，圣路易斯奥运会上第1次进行了篮球表演赛。
				1932年，国际篮球联合会成立。
				1936年，篮球在柏林奥运会中被列为正式比赛项目，中国也首次派出篮球队参加奥运会篮球项目。
				1956年10月，中国篮球协会成立。
				1992年，巴塞罗那奥运会开始，职业选手可以参加奥运会篮球比赛。
				2002年，国际篮联将比赛时间改为4节，每节10min，中间休息2min，半场休息15min的形式。
				2008年，国际篮联首次在奥运会上启用3人裁判制度。
				2010年，24s规则被进一步改进，重新定义了14s规则：限制区重新设计为5.8m x4.9m 的矩形区。
			</view>
			</uni-collapse-item>
			<uni-collapse-item title="羽毛球">
				<view style="padding: 10px;">
				羽毛球（Badminton）是一项隔着球网，使用长柄网状球拍击打用羽毛和软木制作而成的一种小型球类的室内运动项目。羽毛球比赛在长方形的场地上进行，场地中间有网相隔，双方运用各种发球、击球和移动等技战术，将球在网上往返对击，以不使球落在本方有效区域内，或使对方击球失误为胜。
				羽毛球运动的起源有很多说法，但最认可的是起源于14～15世纪的日本。
				而现代羽毛球运动是起源于印度，形成于英国。1875年，羽毛球运动正式出现于人们的视野中。
				1893年，英国的羽毛球俱乐部逐渐发展起来，成立了第一个羽毛球协会，规定了场地的要求和运动的标准。1939年，国际羽联通过了各会员国共同遵守的第一部《羽毛球规则》。2006年，国际羽毛球联合会（IBF）的正式名称更改为羽毛球世界联合会（BWF），即世界羽联。
				羽毛球运动的最高组织机构是世界羽联，1934年在伦敦成立。
				中国最高组织机构是中国羽毛球协会，1958年9月11日在武汉成立。
			</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>

	<view v-else class="page">
		<div style="background: #fff; padding-bottom: 10px;">
			<uni-search-bar style="display:block; width: 90%; margin: auto;" radius="20" clearButton="auto"
				cancelButton="none" placeholder="请输入商品名称" @confirm="search" @clear="search"></uni-search-bar>
		</div>
		<div class="flex">
			<div style="width: 26%; overflow: auto;" class="bar">
				<div v-for="(i, idx) in leftList" :key="idx" :class="['tt', cur == idx ? 'active' : '']"
					@click="selItem(i, idx)">
					{{ i.cate.cateName || '--' }}
				</div>
			</div>
			<div class="ff bar" style="width: 73%; padding: 10px; background: #fff; overflow: auto;">
				<div class="f14 c3">{{ txt }}</div>
				<goodsItem v-for="i in list" :key="i" :info="i" @update="v => { getCar(), getItem(v) }" />
				<view v-if="!list.length" class="kong">暂无数据</view>
				<view v-else class="last">没有更多了</view>
				<div style="height: 80px;"></div>
				<div class="car" @click="openCar" v-if="isToken">
					<uni-badge :text="n" size="normal" absolute="rightTop" :offset="[-35, -35]" />
					<uni-icons type="cart-filled" size="30" color="#fff"></uni-icons>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
import goodsItem from "@/components/goodsItem";
export default {
	components: { goodsItem },
	data() {
		return {
			txt: '全部商品',
			page: 1,
			cur: 0,
			cid: "",
			list: [],
			leftList: [],
			n: 0,
			showPage: false,
			isToken: uni.getStorageSync('token'),
		}
	},
	onShow() {
		this.getShow()
	},

	methods: {
		getShow() {
			this.$request({
				url: '/product/queryShow',
				method: 'get',
				loading: true,
			}).then(res => {
				this.showPage = res.data || false;
				if (res.data) {
					this.getList();
					this.isToken && this.getCar();
				}
			})
		},

		getCar() {
			this.$request({
				url: '/carts/cartsList',
				method: 'get',
				loading: true,
			}).then(res => {
				let n = 0;
				res.data.map(i => n += i.num);
				this.n = n;
			})
		},
		openCar() {
			uni.navigateTo({
				url: `/pages/car`
			});
		},
		search(o) {
			this.cur = null;
			this.txt = '搜索结果',
				this.getItem('', o.value);
		},
		getItem(id, v) {
			this.$request({
				url: '/product/queryProductPage',
				data: {
					productName: v || '',
					cateId: id,
					pageNum: 1,
					pageSize: 100
				}
			}).then(res => {
				this.list = res.data.list.map(i => {
					i.num = 0;
					return i;
				});
			})
		},
		getList() {
			this.$request({
				url: '/product/cateAll',
				method: 'get',
				loading: true,
			}).then(res => {
				res.data.unshift({cate: {cateName: '全部', id: ''}});
				this.leftList = res.data;				
				this.isToken && this.getItem(this.cid || 0);
			})
		},
		selItem(i, n) {
			this.cur = n;
			this.txt = i.cate.cateName;
			this.cid = i.cate.id;
			if (!this.isToken) return;
			this.getItem(this.cid);
		},
	}
}
</script>

<style lang="scss">
.car {
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 50%;
	position: fixed;
	top: 85%;
	right: 20px;
	background: $theme;
}

.tt {
	padding: 10px;
	font-size: 26rpx;
}

.bar {
	height: 93vh;
}

.active {
	font-weight: bold;
	background: #fff;
}

.active::before {
	display: inline-block;
	content: '';
	width: 4px;
	height: 10px;
	margin-right: 8px;
	background: #3254c3;
}
</style>